<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

<div id="app">
    {{msg}}
    {{reverseMethod}}
    {{reverseMethod1()}}
</div>


<script>
    var app = new Vue({
            el: '#app',
            data: {
                msg: 'hhhdddd',
            },
            methods: {
                reverseMethod1() {
                    console.log(this.$data.msg === this.msg);
                    // console.log(this.$data.msg === app.msg);
                    // console.log(app.$data.msg === app.msg);
                    // console.log(this.msg === app.msg);
                    return this.$data.msg.split("").reverse().join("");
                }
            },
            computed: {
                reverseMethod() {
                    console.log(this.$data.msg === this.msg);
                    // console.log(this.$data.msg === app.msg);
                    // console.log(app.$data.msg === app.msg);
                    // console.log(this.msg === app.msg);

                    return this.$data.msg.split("").reverse().join("");
                }
            }

        }
    )

</script>
</html>
